<template>
  <div class="seek">
    <!-- 轮播图 -->
    <Swiper :list="BannerList" />
    <!-- 搜索 -->
    <div class="seek-search">
      <uni-search-bar clearButton="none" cancelButton="none" placeholder="搜索" />
    </div>
    <!-- 用户列表 -->
    <template v-if="viewMode === 'avatar'">
      <userTwolist />
    </template>
    <template v-else-if="viewMode === 'list'">
      <UserList />
    </template>
    <template v-else>
      <UserBiglist />
    </template>
    <!-- 切换列表样式按钮 -->
    <div class="toggle-state">
      <view class="page">
        <view class="main-button" @click="toggleOverlay">
          <img
            :src="
              viewMode === 'avatar'
                ? '../../../static/images/twostate.png'
                : viewMode === 'list'
                ? '../../../static/images/state.png'
                : viewMode === 'grid'
                ? '../../../static/images/bigstate.png'
                : '../../../static/images/state.png'
            "
            alt=""
          />
          <text>
            {{
              viewMode === 'avatar'
                ? '头像'
                : viewMode === 'list'
                ? '列表'
                : viewMode === 'grid'
                ? '大图'
                : '列表'
            }}
          </text>
        </view>
        <view class="overlay" v-if="showOverlay" @click="toggleOverlay">
          <view class="overlay-content" @click.stop>
            <view class="toggle-button" @click="setViewMode('avatar')">
              <img
                :src="
                  viewMode === 'avatar'
                    ? '../../../static/images/select-twostate.png'
                    : '../../../static/images/twostate-v.png'
                "
                alt=""
              />
              <text>头像</text>
            </view>
            <view class="toggle-button" @click="setViewMode('list')">
              <img
                :src="
                  viewMode === 'list'
                    ? '../../../static/images/select-state.png'
                    : '../../../static/images/state-v.png'
                "
                alt=""
              />
              <text>列表</text>
            </view>
            <view class="toggle-button" @click="setViewMode('grid')">
              <img
                :src="
                  viewMode === 'grid'
                    ? '../../../static/images/select-bigstate.png'
                    : '../../../static/images/bigstate-v.png'
                "
                alt=""
              />
              <text>大图</text>
            </view>
          </view>
        </view>
      </view>
    </div>
    <!-- 返回顶部 -->
    <BackTop :show="showBackToTop" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onPageScroll } from '@dcloudio/uni-app'
import type { BannerItem } from '@/types/index/home'
import UserList from '@/components/seek/UserList/userlist.vue'
import UserTwolist from '@/components/seek/UserList/userTwolist.vue'
import UserBiglist from '@/components/seek/UserList/userBiglist.vue'
import BackTop from '@/components/seek/BackTop/backtop.vue'
import Swiper from '../components/Swiper.vue'
import { getHomeBannerAPI } from '@/services/index/home'

const BannerList = ref<BannerItem[]>([
  {
    id: '1',
    imgUrl: 'https://img.51miz.com/Element/00/98/99/44/a5fba953_E989944_c8f215d6.jpg',
    hrefUrl: '',
    type: '',
  },
  {
    id: '2',
    imgUrl:
      'https://th.bing.com/th/id/R.f061b4e1e27e85f8a2f1b446f5632da0?rik=K0NtVoVwv%2fyNZQ&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50051%2f5330.jpg_wh1200.jpg&ehk=9O9IRo5ZS6NMOdTfofPM7C3kRMcOFJb0KQ9zI44iVsM%3d&risl=&pid=ImgRaw&r=0',
    hrefUrl: '',
    type: '',
  },
  {
    id: '3',
    imgUrl: 'https://img95.699pic.com/photo/40027/8625.jpg_wh860.jpg',
    hrefUrl: '',
    type: '',
  },
])

const showBackToTop = ref(false)
// 滚动事件
onPageScroll((event) => {
  showBackToTop.value = event.scrollTop > 50
})
// 切换状态
const showOverlay = ref(false)
const viewMode = ref('list') // 默认视图模式

const toggleOverlay = () => {
  showOverlay.value = !showOverlay.value
}

const setViewMode = (mode: string) => {
  viewMode.value = mode
  toggleOverlay() // 选择模式后关闭遮罩层
}
</script>

<style lang="scss">
.seek {
  background-color: #f5f5f5;
  height: 100%;
}

// 切换状态
.page {
  position: relative;
}

.main-button {
  position: fixed;
  bottom: 100px;
  right: 20px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
  background-color: #00aabf;
  color: #ffffff;
  font-size: 12px;
  padding: 5px 11px;
  image {
    width: 25px;
    height: 25px;
  }
}

.overlay {
  z-index: 999;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlay-content {
  position: fixed;
  right: 20px;
  bottom: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 8px;
}

.toggle-button {
  padding: 5px 11px;
  width: 48px;
  height: 48px;
  margin-bottom: 8px;
  background-color: #ffffff;
  border-radius: 8px;
  color: #666666;
  font-size: 12px;
  transition: background-color 0.3s;
  image {
    width: 25px;
    height: 25px;
  }

  &.active {
    background-color: #00bfa5;
    color: #ffffff;
  }
}

.toggle-button:last-child {
  margin-bottom: 0;
}
</style>
